import React, { Component } from 'react'
import BetterScroll from 'better-scroll'

export default class App extends Component {
  state = {
    lits: [
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
    ],
  }
  constructor() {
    super()
    console.log('constructor')
  }

  componentDidMount() {
    console.log('componentDidMount')
    new BetterScroll('#wrapper')
  }

  render() {
    console.log('render')
    return (
      <div>
        <h1>App</h1>
        <div
          id='wrapper'
          style={{
            height: '200px',
            backgroundColor: 'yellow',
            overflow: 'hidden',
          }}
        >
          <ul>
            {this.state.lits.map((item) => {
              return <li key={item}>{item}</li>
            })}
          </ul>
        </div>
      </div>
    )
  }
}
